﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome page</title>
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="css/demo_table.css" type="text/css">
    <link rel="stylesheet" href="jquery-ui-1.8.16.custom.css" type="text/css">


</head>
<body>
<script type="text/javascript">

    function SetUpper() {
        $('.searchbox').removeClass('searchbox').addClass('standartbox');
        $('#logo:first').attr('src', "/logo_small.png");
        $('.brremove').remove();
    }

    $(document).ready(function() {
        $('#pauseelement').hide();

        $("#requestbar").autocomplete({
            source: function(request, response) {
                $.getJSON('/?act=autocomplete&request=' + encodeURIComponent(request),
                        function(data) {
                            alert(data);
                            response($.map(data.geonames, function(item) {
                                return {
                                    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                    value: item.name
                                }
                            }));
                        }
                );
            },
            minLength: 2,
            select: function(event, ui) {
                alert(ui.item ?
                        "Selected: " + ui.item.label :
                        "Nothing selected, input was " + this.value);
            },
            open: function() {
               // $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                //$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    });

    function pause() {
        $('#pauseelement').show();
    }
    function resume() {
        $('#pauseelement').hide();
    }


    function onSearchDataReceived(data) {
        SetUpper();
        var table = new Array();
        $.each(data, function(key, value) {
            table.push([value['artist'],value['name']]);
        });

        $('#out').dataTable({
            "bDestroy": true,
            "bProcessing": false,
            "bJQueryUI": true,
            "bPaginate": false,
            "bFilter": false,
            "bInfo": false,
            "bSort": false,
            "aaData": table,
            "aoColumns": [
                { "sTitle": "Артист" },
                { "sTitle": "Композиция" }

            ]
        });
    }
    function search() {
        pause();
        // sleep(1000);
        var text = $('#requestbar').val();
        text = "test.js?" + text;
        $.getJSON(text, function(data) {
            resume();
            onSearchDataReceived(data);
        });
        return false;
    }
</script>

<div id="pauseelement"
     style="background-color: red; display: none;  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10;">
    <h1>We are processing your request. Please be patient.</h1>
</div>

<form action="" onsubmit="search(); return false;">
    <div class="searchbox">
        <img id="logo" src="logo.png " alt="logo" style="vertical-align: sub; margin-right: 1em;">

        <br class="brremove"/><input type="text" name="request" class="searchtext" id="requestbar"/>

        <br class="brremove"/><input type="submit" value="Поиск музыки" class="searchsubmit"/>

    </div>

    <script type="text/javascript">
        $('#requestbar').focus();
        // search();
    </script>
</form>
<table id="out" width="100%">
</table>
</body>
</html>